<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Simple passwors generator</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" href="css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
</head>
<style>
	body {background: #aaaaaa;  url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;}
</style>
<body>

<div id="dialog" title="Генератор пароля">
	<div class="ui-widget-content ui-corner-all">
		Значение сокращений:<br />
		N - цифра,<br />
		c - согласная прописная,<br />
		a - гласная прописная,<br />
		S - спецсимвол,<br />
		C - согланая заглавная,<br />
		A - гласная заглавная<br />
		+/- - длина пароля<br />
	</div>
	<div style="text-align: center">
		<div class="ui-icon ui-icon-minusthick ui-button" id="minus" style="float:left; margin:6px"></div>
		<input id="pass" value="password" disabled="disables"/>
		<div class="ui-icon ui-icon-plusthick ui-button" id="plus" style="float:right; margin:6px"></div>
	</div>
	<div style="text-align: center;">
		<div id="num1" style="width: 24px; height: 50px; float: left">
			<div class="ui-icon ui-icon-circle-triangle-n ui-button" id="up" title="1"></div>
			<div class="ui-widget-header" id="pos1">N</div>
			<div class="ui-icon ui-icon-circle-triangle-s ui-button" id="down" title="1"></div>
		</div>
		<div id="num2" style="width: 24px; height: 50px; float: left">
			<div class="ui-icon ui-icon-circle-triangle-n ui-button" id="up" title="2"></div>
			<div class="ui-widget-header" id="pos2">c</div>
			<div class="ui-icon ui-icon-circle-triangle-s ui-button" id="down" title="2"></div>
		</div>
		<div id="num3" style="width: 24px; height: 50px; float: left">
			<div class="ui-icon ui-icon-circle-triangle-n ui-button" id="up" title="3"></div>
			<div class="ui-widget-header" id="pos3">a</div>
			<div class="ui-icon ui-icon-circle-triangle-s ui-button" id="down" title="3"></div>
		</div>
		<div id="num4" style="width: 24px; height: 50px; float: left">
			<div class="ui-icon ui-icon-circle-triangle-n ui-button" id="up" title="4"></div>
			<div class="ui-widget-header" id="pos4">c</div>
			<div class="ui-icon ui-icon-circle-triangle-s ui-button" id="down" title="4"></div>
		</div>
		<div id="num5" style="width: 24px; height: 50px; float: left">
			<div class="ui-icon ui-icon-circle-triangle-n ui-button" id="up" title="5"></div>
			<div class="ui-widget-header" id="pos5">S</div>
			<div class="ui-icon ui-icon-circle-triangle-s ui-button" id="down" title="5"></div>
		</div>
		<div id="num6" style="width: 24px; height: 50px; float: left">
			<div class="ui-icon ui-icon-circle-triangle-n ui-button" id="up" title="6"></div>
			<div class="ui-widget-header" id="pos6">C</div>
			<div class="ui-icon ui-icon-circle-triangle-s ui-button" id="down" title="6"></div>
		</div>
		<div id="num7" style="width: 24px; height: 50px; float: left">
			<div class="ui-icon ui-icon-circle-triangle-n ui-button" id="up" title="7"></div>
			<div class="ui-widget-header" id="pos7">A</div>
			<div class="ui-icon ui-icon-circle-triangle-s ui-button" id="down" title="7"></div>
		</div>
		<div id="num8" style="width: 24px; height: 50px; float: left">
			<div class="ui-icon ui-icon-circle-triangle-n ui-button" id="up" title="8"></div>
			<div class="ui-widget-header" id="pos8">C</div>
			<div class="ui-icon ui-icon-circle-triangle-s ui-button" id="down" title="8"></div>
		</div>
		<div id="num9" style="width: 24px; height: 50px; float: left">
			<div class="ui-icon ui-icon-circle-triangle-n ui-button" id="up" title="9"></div>
			<div class="ui-widget-header" id="pos9">N</div>
			<div class="ui-icon ui-icon-circle-triangle-s ui-button" id="down" title="9"></div>
		</div>
		<div id="num10" style="width: 24px; height: 50px; float: left" class="ui-helper-hidden">
			<div class="ui-icon ui-icon-circle-triangle-n ui-button" id="up" title="10"></div>
			<div class="ui-widget-header" id="pos10">N</div>
			<div class="ui-icon ui-icon-circle-triangle-s ui-button" id="down" title="10"></div>
		</div>
		<div id="num11" style="width: 24px; height: 50px; float: left" class="ui-helper-hidden">
			<div class="ui-icon ui-icon-circle-triangle-n ui-button" id="up" title="11"></div>
			<div class="ui-widget-header" id="pos11">N</div>
			<div class="ui-icon ui-icon-circle-triangle-s ui-button" id="down" title="11"></div>
		</div>
		<div id="num12" style="width: 24px; height: 50px; float: left" class="ui-helper-hidden">
			<div class="ui-icon ui-icon-circle-triangle-n ui-button" id="up" title="12"></div>
			<div class="ui-widget-header" id="pos12">N</div>
			<div class="ui-icon ui-icon-circle-triangle-s ui-button" id="down" title="12"></div>
		</div>
	</div>
</div>
<div class="ui-widget ui-helper-hidden" id="passok">
	<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
		<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
		<strong>Ok!</strong> Новый пароль сгенерирован.</p>
	</div>
</div>
<div class="ui-widget ui-helper-hidden" id="notless">
	<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
		<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> 
		<strong>Хей!</strong> Длина пароля не менее 3х символов.</p>
	</div>
</div>
<div class="ui-widget ui-helper-hidden" id="notmore">
	<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
		<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> 
		<strong>Хей!</strong> Длина пароля не более 12х символов.</p>
	</div>
</div>
<script>
	$(function() {
	var length = 9;
	var pattern = 'NcacSCACNNNN'; //шаблон пароля
	var pattern_num = '123245651111'; //его цифро-соответствие с
	var sym = 'NcaSCA'; //этими цифрами

		//окошко диалога
		$( "#dialog" ).dialog({
		width: 325,
		height: 420,
		buttons: {
			"генерировать": function() {
				$.post(
					'/passgen.php',
					{
						pattern: pattern,
						length: length
					},
					onAjaxSuccess
				);
			}
		}
		});
		function onAjaxSuccess(data)
		{
			// Здесь мы получаем данные, отправленные сервером
			$("#pass").attr('value',data);
			$("#passok").hide();
			$("#passok").show();
			setTimeout(function() {$("#passok").fadeOut(1000)}, 2000);
		};
		// кнопочки длины пароля
		$("#minus").bind('click', function() {
			if (length > 3) {
				$("#num"+(length--)).hide();
			}
			else {
				$("#notless").hide();
				$("#notless").show();
				setTimeout(function() {$("#notless").fadeOut(1000)}, 2000);
			}
		});
		$("#plus").bind('click', function() {
			if (length < 12) {
				$("#num"+(++length)).show();
			}
			else {
				$("#notmore").hide();
				$("#notmore").show();
				setTimeout(function() {$("#notmore").fadeOut(1000)}, 2000);
			}
		});
		//кнопоки шаблончика
		$("div#up").click(function() {
			var i = $(this).attr('title'); //номер символа
			j = pattern_num[--i]; //позиция символа
			s = sym[j-1]; //сам символ
			if (pattern_num[i]<6) { //их и так не больше 6
				//слепить цифр.шаблон пароль, т.к. в js нельзя заменить в строке один символ
				pattern_num = pattern_num.substr(0,i) + ++j + pattern_num.substr(++i);
				s = sym[j-1]; //новый символ
				//и новый шаблон в буквах слепить
				pattern = pattern.substr(0,--i) + s + pattern.substr(++i);
				$("#pos" + i).empty(); //стереть старое значение на экране
				$("#pos" + i).append(s); //и записать туда новую букву
			}
		});
		$("div#down").click(function() {
			var i = $(this).attr('title'); //номер символа
			j = pattern_num[--i];
			s = sym[j-1];
			if (pattern_num[i]>1) {
				var str = '';
				pattern_num = pattern_num.substr(0,i) + --j + pattern_num.substr(++i);
				s = sym[j-1];
				pattern = pattern.substr(0,--i) + s + pattern.substr(++i);
				$("#pos" + i).empty();
				$("#pos" + i).append(s);
			}
		});
	});
</script>
</body>
</html>